<template>
	<mask-model
		ref="mask-model"
		class="soilMoisture-model"
		title="狮山土壤自动观测站"
		:isCancel="true"
		@cancel="cancel">
		<div class="soilMoisture-warpper">
			<div class="soilMoisture-tabs">
				<Tabs type="card" v-model="activeTab" @on-click="tabsClick">
			        <TabPane label="土壤体积含水量" name="soilVolume"></TabPane>
			        <TabPane label="土壤相对湿度" name="soilHumidity"></TabPane>
			        <TabPane label="土壤重量含水率 " name="soilMoisture"></TabPane>
			        <TabPane label="土壤有效水分贮存量 " name="soilStock"></TabPane>
			    </Tabs>
			</div>
			<div class="soilMoisture-echart" v-show="activeTab === 'soilVolume'" ref="soilVolume"></div>
			<div class="soilMoisture-echart" v-show="activeTab === 'soilHumidity'" ref="soilHumidity"></div>
			<div class="soilMoisture-echart" v-show="activeTab === 'soilMoisture'" ref="soilMoisture"></div>
			<div class="soilMoisture-echart" v-show="activeTab === 'soilStock'" ref="soilStock"></div>

			<loading v-show="showLoading"></loading>
		</div>
	</mask-model>
</template>

<script>
	import { maskModelMixin, loadingMixin } from 'common/js/mixins'
import { soilMoisture } from 'common/js/echart'
import { ERR_OK } from 'api/config'
import { getSoilMoistureInfo } from 'api/aPicture'

export default {
		mixins: [maskModelMixin, loadingMixin],
		created () {
			this.soilVolume = null
		this.soilHumidity = null
		this.soilMoisture = null
		this.soilStock = null

		this.filterData = {
				// 土壤体积含水量
				waterratio: {},

				// 土壤相对湿度
				humidity: {},

				// 土壤重量含水率
				moisturecontent: {},

				// 土壤有效水分贮存量
				waterstorage: {}
			}
	},
		data () {
			return {
				activeTab: 'soilVolume',
				item: null,
				showLoading: false
			}
		},
		methods: {
			tabsClick (name) {
				this.$nextTick(() => {
					if (!this[name]) {
						this[name] = echarts.init(this.$refs[name])
				}
					let data, title, company

				switch (name) {
						case 'soilVolume':
							data = this.filterData.waterratio
						title = '土壤体积含水量'
						company = '克'
						break
					case 'soilHumidity':
							data = this.filterData.humidity
						title = '土壤相对湿度'
						company = '%'
						break
					case 'soilMoisture':
							data = this.filterData.moisturecontent
						title = '土壤重量含水率'
						company = '%'
						break
					case 'soilStock':
							data = this.filterData.waterstorage
						title = '土壤有效水分贮存量'
						company = '毫米'
						break
				}

					this[name].setOption(new soilMoisture(data, title, company).echartData)
			})
			},
			cancel () {
				this.item.selected = false
		},
			show (item) {
				this.$refs['mask-model'].show = true
			this.item = item
			this.activeTab = 'soilVolume'

			this.$nextTick(() => {
					this._getInfo()

				if (this.soilVolume) {
						return
					}

					this.soilVolume = echarts.init(this.$refs.soilVolume)
			})
			},
			_getInfo () {
				this.showLoading = true
			getSoilMoistureInfo().then(res => {
					if (res.code === ERR_OK && res.result.length) {
						res.result.map(item => {
							if (!this.filterData['waterratio'][`deepth${item.deepth}`]) {
								this.filterData['waterratio'][`deepth${item.deepth}`] = []
							this.filterData['humidity'][`deepth${item.deepth}`] = []
							this.filterData['moisturecontent'][`deepth${item.deepth}`] = []
							this.filterData['waterstorage'][`deepth${item.deepth}`] = []
							for (let i = 0; i < 24; i++) {
									this.filterData['waterratio'][`deepth${item.deepth}`].push('')
								this.filterData['humidity'][`deepth${item.deepth}`].push('')
								this.filterData['moisturecontent'][`deepth${item.deepth}`].push('')
								this.filterData['waterstorage'][`deepth${item.deepth}`].push('')
							}
							}

							let time = +item.datatime.split(' ')[1].split(':')[0]
						this.filterData['waterratio'][`deepth${item.deepth}`][time] = item.waterratio
						this.filterData['humidity'][`deepth${item.deepth}`][time] = item.humidity
						this.filterData['moisturecontent'][`deepth${item.deepth}`][time] = item.moisturecontent
						this.filterData['waterstorage'][`deepth${item.deepth}`][time] = item.waterstorage
					})
					}

					this.soilVolume.setOption(new soilMoisture(this.filterData['waterratio'], '土壤体积含水量', '克').echartData)

				this.showLoading = false
			})
			}
		}
	}
</script>

<style lang="scss">
	.soilMoisture-model {
		.soilMoisture-warpper {
			width: 100%;
			height: 100%;
			position: relative;
			.soilMoisture-tabs {
				position: absolute;
				top: 5px;
				left: 5px;
				right: 5px;
			}
			.soilMoisture-echart {
				position: absolute;
				top: 40px;
				left: 0;
				right: 0;
				bottom: 0;
			}
		}
		.ivu-modal {
			width: 900px !important;
			height: 550px;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			position: absolute;
			.ivu-modal-body {
				height: 510px;
				padding: 0;
				position: relative;
				overflow: hidden;
				background-color: white;
			}
		}
	}
</style>
